import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

class Header extends Component {
  // go操作
  goto = () => {
    const { go } = this.props.history
    go(1)
  }
  // back操作
  back = () => {
    const { goBack } = this.props.history
    goBack()
  }
  // 前进操作
  forward = () => {
    const { goForward } = this.props.history
    goForward()
  }
  render() {
    console.log('Header组件接收到的props是：',this.props);
    return (
      <div className="page-header">
        <h2>React Router Demo</h2>
        &nbsp;<button onClick={() => this.back()}>goBack</button>
        &nbsp;<button onClick={() => this.goto()}>go</button>
        &nbsp;<button onClick={() => this.forward()}>forward</button>
      </div>
    )
  }
}

export default withRouter(Header)


// withRouter可以加工一般组件，让一般组件具有路由组件所特有的API
// withRouter返回的是一个新组件